import React from 'react';
import {useRoutes, Navigate} from 'react-router-dom';
import Login from "../view/login/Login"
import Home from "../view/home/Home"

const Index: React.FC = () => {
    const routes = useRoutes([
            {
                path: "/login",
                element: <Login/>,//作为跟路由
            },
            {
                path: '/home',
                element: <Home/>,
                children: [

                    {
                        path: 'dashboard',
                        element: lazyload('dashboard/Dashboard')
                    },
                    {
                        path: 'table',
                        element: lazyload('table/Table')
                    },

                ]

            },
            //重定向
            {
                path: '/',
                element:
                    <Navigate to="/login" replace/>,
            },

        ])
    ;

    return routes;
};
let lazyload = (path: string) => {
    const Component = React.lazy(() => import(`../view/${path}`));
    return (
        <React.Suspense fallback={<div>Loading...</div>}>
            <Component/>
        </React.Suspense>
    );
};
export default Index;
